<template>
	<div>
		<Header></Header>
		<div class="container">
      <div class="content" v-for="(item, index) in this.list" :key='index' @click="handleDetail(item)">
        <div class="title">{{ item.name }}</div>
        <div class="time">{{ item.createTime }}</div>
      </div>
      <Pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
      @pagination="getList" />
    </div>
		<Footer></Footer>
	</div>
</template>

<script>
import Header from "@/views/front/components/Header";
import Footer from "@/views/front/components/Footer";
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getNewData } from "@/api/front-home.js";

export default {
  name: 'newsList',
  props: {
  },
  components: {
    Header,
		Footer,
    Pagination
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        code$in: this.type,
        pageNo: 1,
        pageSize: 10,
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    getList() {
      getNewData(this.listQuery).then(response => {
        this.list = response.list || []
        this.total = response.totalCount
      })
    },
    handleDetail(item) {
      this.$router.push({
        path: "/front-newDetail",
        query: {
          id: item.id
        },
      });
    }
  },
  created() {
    this.listQuery.code$in = this.$route.query.type
    this.getList()
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .container {
    width: 1300px;
    margin: 0 auto;
  }

  .content {
    position: relative;
    height: 50px;
    border-bottom: 1px solid rgb(235, 235, 235);
    cursor: pointer;

    &:hover {
      color: #ffac00;
    }
  }
  .title {
    width: 1000px;
    @include ellipsis($line: 1);
    font-size: 18px;
    line-height: 50px;
    font-family: Microsoft YaHei;
		font-weight: 300;
  }

  .time {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 16px;
    font-family: Microsoft YaHei;
		font-weight: 300;
  }
</style>